<template>
  <div class="police-container">
    <!-- 饼图 -->
    <section class="pie-box">
      <h3 class="childpage-title">周警情处理情况</h3>
      <div id="policePie" style="width:100%;height:85%;margin-top:25px;"></div>
    </section>
    <!-- 雷达图 -->
    <section class="radar-box">
      <h3 class="childpage-title">周警情变化</h3>
      <div id="policeRadar" style="width:100%;height:80%;margin-top:25px;"></div>
      <div class="radar-lengend">
        <ul>
          <li>
            <div></div>本周
          </li>
          <li>
            <div></div>上周
          </li>
         <!--  <li>
            <div></div>最高值
          </li> -->
        </ul>
      </div>
    </section>
    <!-- 热词 -->
    <section v-if="showHotWords" class="world-box">
      <div class="police-hot">
        <h3 class="childpage-title">警情热词</h3>
        <div id="hotWorld_police" style="width:100%;height:100%"></div>
      </div>
    </section>
  </div>
</template>
<script>
import { getWeekAlarmTotalCount, getAlarmTrends } from "@/api/police";
import { getTopHotWord } from "@/api/dangers";
import "@/styles/common/childPage.scss";
var echarts = require("echarts/lib/echarts");
require("echarts-wordcloud");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");

export default {
  name: "ReceivingPoliceR",
  data() {
    return {
      NewArr: [],
      pieData: [],
      thisWeeksData: [],
      lastWeeksData: [],
      Max: Number,
      maxIndex: 0,
      maxData: [],
      labelLineStatus: true,
      orgIds: "",
      hotWordList:[],
      showHotWords:this.bsConfig.showPoliceHotWords!==false
    };
  },
  props: {
    parames: {
      required: true
    }
  },
  created() {
    let that = this;
    that.orgIds = this.parames.orgIds;
  },
  mounted() {
    // this.getHot();
    this.getWeekAlarmTotalCount();
    this.getAlarmTrends();
    if(this.showHotWords){
      this.getWorld();
      this.getTopHotWord();
    }
  },
  methods: {
    getWeekAlarmTotalCount() {
      getWeekAlarmTotalCount({
        orgIds: this.orgIds ,
        dataType: -1
      }).then(res => {
        if (res.status == 200) {
          this.pieData = res.data;
          if (
            this.pieData.handlerCount == 0 &&
            this.pieData.unHandlerCount == 0 &&
            (this.pieData.handlerCount == 0 &&
              this.pieData.processingCount == 0) &&
            (this.pieData.processingCount == 0 &&
              this.pieData.unHandlerCount == 0)
          ) {
            this.labelLineStatus = true;
          } else {
            this.labelLineStatus = false;
          }
          this.getPie(); //渲染饼图
        }
      });
    },
    getAlarmTrends() {
      getAlarmTrends({ orgIds: this.orgIds }).then(res => {
        if (res.status == 200) {
          this.radarData = res.data;
          this.thisWeeksData = res.data.thisWeek.map((item, index, arr) => {
            return item.value;
          });
          this.lastWeeksData = res.data.lastWeek.map((item, index, arr) => {
            return item.value;
          });
          let thisStart = this.thisWeeksData.slice(0, 4).reverse();
          let thisEnd = this.thisWeeksData.slice(4, 7).reverse();
          let lastStart = this.lastWeeksData.slice(0, 4).reverse();
          let lastEnd = this.lastWeeksData.slice(4, 7).reverse();
          this.thisWeeksData = thisStart.concat(thisEnd);
         
          this.lastWeeksData = lastStart.concat(lastEnd);
          this.thisWeeksData.splice(4, 0, 0, 0, 0, 0, 0);
          this.lastWeeksData.splice(4, 0, 0, 0, 0, 0, 0);
         
          let concatArr = this.thisWeeksData.concat(this.lastWeeksData);
          this.max = Math.max.apply(null, concatArr);
          concatArr.find((item, index, arr) => {
            return item == this.max
              ? (this.maxIndex = index > 11 ? index - 12 : index)
              : "";
          });
          this.maxData = new Array(12);
          this.maxData.splice(this.maxIndex, 1, this.max);
          // console.log(this.maxIndex)
          this.getRadar(); //渲染雷达
        }
      });
    },
    getTopHotWord() {
      let that = this;
      let parames = {
        topN: 10,
        orgIds: that.orgIds,
        types: 2
      };
      getTopHotWord(parames).then(res => {
        if (res.status == 200) {
          that.hotWordList = res.data.map(function(item){
            return{
              name :item.keyWord,
              value: item.score
            }
          });
          that.getWorld();
        }
        //that.getYearLine(that.getHiddenTimeAccumulateYearCount.dataCountList);
      });
    },
    // pie
    getPie() {
      let myChart = echarts.init(document.getElementById("policePie"));
      var pieNewData = [
        {
          value: this.pieData.handlerCount || 0,
          legendname: "已处理",
          // name: "种类01  335",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: " rgba(108, 191, 152, 1)" },
              { offset: 1, color: " rgba(87, 210, 128, 1)" }
            ])
          }
        },
        {
          value: this.pieData.unHandlerCount,
          legendname: "未处理",
          // name: "种类02  310",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#d59449" },
              { offset: 1, color: "#ec8d20" }
            ])
          }
        },
        {
          value: this.pieData.processingCount,
          legendname: "处理中",
          // name: "种类03  234",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "rgba(94, 184, 247, 1)" },
              { offset: 1, color: "rgba(38, 153, 234, 1)" }
            ])
          }
        }
      ];
      pieNewData = pieNewData.filter((item, index, arr) => {
        return item.value != 0;
      });
      var handleRate;
      if (
        this.pieData.handlerCount +
          this.pieData.unHandlerCount +
          this.pieData.processingCount ==
        0
      ) {
        handleRate = 0;
      } else {
        handleRate =
          (
            (this.pieData.handlerCount /
              (this.pieData.handlerCount +
                this.pieData.unHandlerCount +
                this.pieData.processingCount)) *
            100
          ).toFixed(2) + "%";
      }

      let option = {
        title: [
          {
            text: handleRate,
            subtext: "处理率",
            textStyle: {
              fontSize: 24,
              color: "#FFFFFF"
            },
            subtextStyle: {
              fontSize: 24,
              color: "#A3BEDD"
            },
            textAlign: "center",
            x: "50%",
            y: "38%"
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: function(parms) {
            var str =
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value;
            return str;
          }
        },

        series: [
          {
            name: "",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                textStyle: {
                  color: "#FFFFFF",
                  fontSize: 18 // 改变标示文字的颜色
                },
                formatter: parms => {
                  return this.labelLineStatus ? "" : parms.data.legendname;
                }
              }
            },
            labelLine: {
              normal: {
                length: 15,
                length2: 60,
                smooth: false
                // show:false
              }
            },
            data: pieNewData
          }
        ]
      };
      myChart.setOption(option);
    },
    //   雷达
    getRadar() {
      let myChart = echarts.init(document.getElementById("policeRadar"));
      let option = {
        color: ["#2968E6", "rgba(94,184,247,.5)"],
        tooltip: {
          trigger: "item"
        },
        radar: [
          {
            shape: "circle",
            radius: "150%",
            splitArea: {
              areaStyle: {
                color: ["transparent"]
              }
            },
            axisLabel: {
              fontSize: 22,
              fontWeight: 400,
              color: "rgba(127,192,247,.2)"
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(127,192,247,.2)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(127,192,247,.2)"
              }
            },

            indicator: [
              { text: "周四", color: "#FFFFFF", max: this.max },
              { text: "周三", color: "#FFFFFF", max: this.max },
              { text: "周二", color: "#FFFFFF", max: this.max },
              { text: "周一", color: "#FFFFFF", max: this.max },
              { text: null },
              { text: null },
              { text: null },
              { text: null },
              { text: null },
              { text: "周日", color: "#FFFFFF", max: this.max },
              { text: "周六", color: "#FFFFFF", max: this.max },
              { text: "周五", color: "#FFFFFF", max: this.max }
            ],
            center: ["50%", "98%"]
          }
        ],
        series: [
          {
            name: "本周",
            type: "radar",
            symbol: "none",
            areaStyle: {
              normal: {
                color: "rgba(94, 184, 247, 0.5)"
              }
            },
            lineStyle: {
              normal: {
                color: "rgba(127,192,247, 1)",
                width: 2
              }
            },
            tooltip: {
              formatter: params => {
                let mydate = new Date();
                let myddy = mydate.getDay();

                if (myddy == 6) {
                  params.data[9] = "";
                  return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                    params.data[3]
                  },</span>上周一：${this.lastWeeksData[3]}<br> 
                <span style="display:inline-block;width:100px;" >本周二：${
                  params.data[2]
                },</span>上周二：${this.lastWeeksData[2]} <br>
                <span style="display:inline-block;width:100px;" >本周三：${
                  params.data[1]
                },</span>上周三：${this.lastWeeksData[1]}<br>
                <span style="display:inline-block;width:100px;" >本周四：${
                  params.data[0]
                },</span> 上周四：${this.lastWeeksData[0]}<br>
                <span style="display:inline-block;width:100px;" >本周五：${
                  params.data[11]
                },</span>上周五：${this.lastWeeksData[11]} <br>
                <span style="display:inline-block;width:100px;" >本周六：${
                  params.data[10]
                },</span>上周六：${this.lastWeeksData[10]}<br> 
                   <span style="display:inline-block;width:100px;" ></span>上周日：${this.lastWeeksData[9]}</div>`;
                }
                if (myddy == 5) {
                  params.data[10] = "";
                  params.data[9] = "";
                  return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                    params.data[3]
                  },</span>上周一：${this.lastWeeksData[3]}<br> 
                <span style="display:inline-block;width:100px;" >本周二：${
                  params.data[2]
                },</span>上周二：${this.lastWeeksData[2]} <br>
                <span style="display:inline-block;width:100px;" >本周三：${
                  params.data[1]
                },</span>上周三：${this.lastWeeksData[1]}<br>
                <span style="display:inline-block;width:100px;" >本周四：${
                  params.data[0]
                },</span>上周四：${this.lastWeeksData[0]}<br>
                <span style="display:inline-block;width:100px;" >本周五：${
                  params.data[11]
                },</span>上周五：${this.lastWeeksData[11]} <br>
              <span style="display:inline-block;width:100px;" ></span>上周六：${this.lastWeeksData[10]}<br> 
                 <span style="display:inline-block;width:100px;" ></span>上周日：${this.lastWeeksData[9]}</div>`;
                }
                if (myddy == 4) {
                  params.data[11] = "";
                  params.data[10] = "";
                  params.data[9] = "";
                  return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                    params.data[3]
                  },</span>上周一：${this.lastWeeksData[3]}<br> 
                <span style="display:inline-block;width:100px;" >本周二：${
                  params.data[2]
                },</span>上周二：${this.lastWeeksData[2]} <br>
                <span style="display:inline-block;width:100px;" >本周三：${
                  params.data[1]
                },</span>上周三：${this.lastWeeksData[1]}<br>
                <span style="display:inline-block;width:100px;" >本周四：${
                  params.data[0]
                },</span>上周四：${this.lastWeeksData[0]}<br>
             <span style="display:inline-block;width:100px;" ></span>上周五：${this.lastWeeksData[11]} <br>
              <span style="display:inline-block;width:100px;" ></span>上周六：${this.lastWeeksData[10]}<br> 
              <span style="display:inline-block;width:100px;" ></span>上周日：${this.lastWeeksData[9]}</div>`;
                }
                if (myddy == 3) {
                  params.data[0] = "";
                  params.data[11] = "";
                  params.data[10] = "";
                  params.data[9] = "";
                  return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                    params.data[3]
                  },</span>上周一：${this.lastWeeksData[3]}<br> 
                <span style="display:inline-block;width:100px;" >本周二：${
                  params.data[2]
                },</span>上周二：${this.lastWeeksData[2]} <br>
                <span style="display:inline-block;width:100px;" >本周三：${
                  params.data[1]
                },</span>上周三：${this.lastWeeksData[1]}<br>
                    <span style="display:inline-block;width:100px;" ></span>上周四：${this.lastWeeksData[0]}<br>
                    <span style="display:inline-block;width:100px;" ></span>上周五：${this.lastWeeksData[11]} <br>
                  <span style="display:inline-block;width:100px;" ></span>上周六：${this.lastWeeksData[10]}<br> 
                     <span style="display:inline-block;width:100px;" ></span>上周日：${this.lastWeeksData[9]}</div>`;
                }
                if (myddy == 2) {
                  params.data[1] = "";
                  params.data[0] = "";
                  params.data[11] = "";
                  params.data[10] = "";
                  params.data[9] = "";
                  return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                    params.data[3]
                  },</span>上周一：${this.lastWeeksData[3]}<br> 
                <span style="display:inline-block;width:100px;" >本周二：${
                  params.data[2]
                },</span>上周二：${this.lastWeeksData[2]} <br>
                  <span style="display:inline-block;width:100px;" ></span>上周三：${this.lastWeeksData[1]}<br>
                     <span style="display:inline-block;width:100px;" ></span>上周四：${this.lastWeeksData[0]}<br>
                   <span style="display:inline-block;width:100px;" ></span>上周五：${this.lastWeeksData[11]} <br>
                   <span style="display:inline-block;width:100px;" ></span>上周六：${this.lastWeeksData[10]}<br> 
                      <span style="display:inline-block;width:100px;" ></span>上周日：${this.lastWeeksData[9]}</div>`;
                }
                if (myddy == 1) {
                  params.data[2] = "";
                  params.data[1] = "";
                  params.data[0] = "";
                  params.data[11] = "";
                  params.data[10] = "";
                  params.data[9] = "";
                  return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                    params.data[3]
                  },</span>上周一：${this.lastWeeksData[3]}<br> 
                   <span style="display:inline-block;width:100px;" ></span>上周二：${this.lastWeeksData[2]} <br>
                  <span style="display:inline-block;width:100px;" ></span>上周三：${this.lastWeeksData[1]}<br>
                     <span style="display:inline-block;width:100px;" ></span>上周四：${this.lastWeeksData[0]}<br>
                   <span style="display:inline-block;width:100px;" ></span>上周五：${this.lastWeeksData[11]} <br>
                   <span style="display:inline-block;width:100px;" ></span>上周六：${this.lastWeeksData[10]}<br> 
                      <span style="display:inline-block;width:100px;" ></span>上周日：${this.lastWeeksData[9]}</div>`;
                }
                return `<div style="padding:20px 10px;"><span style="display:inline-block;width:100px;">本周一：${
                  params.data[3]
                },</span>上周一：${this.lastWeeksData[3]}<br> 
                <span style="display:inline-block;width:100px;" >本周二：${
                  params.data[2]
                },</span>上周二：${this.lastWeeksData[2]} <br>
                <span style="display:inline-block;width:100px;" >本周三：${
                  params.data[1]
                },</span>上周三：${this.lastWeeksData[1]}<br>
                <span style="display:inline-block;width:100px;" >本周四：${
                  params.data[0]
                },</span> 上周四：${this.lastWeeksData[0]}<br>
                <span style="display:inline-block;width:100px;" >本周五：${
                  params.data[11]
                },</span>上周五：${this.lastWeeksData[11]} <br>
                <span style="display:inline-block;width:100px;" >本周六：${
                  params.data[10]
                },</span>上周六：${this.lastWeeksData[10]}<br> 
                 <span style="display:inline-block;width:100px;">本周日：${
                   params.data[9]
                 },</span> 上周日：${this.lastWeeksData[9]}</div>`;
              }
            },
            data: [this.thisWeeksData]
          },
          {
            name: "上周",
            type: "radar",
            symbol: "none",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: "rgba(41,104,230, 0.5)"
              }
            },
            lineStyle: {
              normal: {
                color: "rgba(41,104,230, 1)",
                width: 2
              }
            },
            tooltip: {
              formatter: params => {
                let mydate = new Date();
                let myddy = mydate.getDay();
                if (myddy == 6) {
                  this.thisWeeksData[9] = "";
                  return `<div style="padding:30px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
                <span style="display:inline-block;width:100px;">本周二：${
                  this.thisWeeksData[2]
                },</span>上周二：${params.data[2]} <br>
                <span style="display:inline-block;width:100px;">本周三：${
                  this.thisWeeksData[1]
                },</span>上周三：${params.data[1]}<br>
                <span style="display:inline-block;width:100px;">本周四：${
                  this.thisWeeksData[0]
                },</span>上周四：${params.data[0]} <br>
                <span style="display:inline-block;width:100px;">本周五：${
                  this.thisWeeksData[11]
                },</span>上周五：${params.data[11]}
                <br> <span style="display:inline-block;width:100px;">本周六：${
                  this.thisWeeksData[10]
                }</span>上周六：${params.data[10]}<br>
                <span style="display:inline-block;width:100px;"></span>上周日：${params.data[9]}</div>`;
                }
                if (myddy == 5) {
                  this.thisWeeksData[10] = "";
                  this.thisWeeksData[9] = "";
                  return `<div style="padding:20px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
                <span style="display:inline-block;width:100px;">本周二：${
                  this.thisWeeksData[2]
                },</span>上周二：${params.data[2]} <br>
                <span style="display:inline-block;width:100px;">本周三：${
                  this.thisWeeksData[1]
                },</span>上周三：${params.data[1]}<br>
                <span style="display:inline-block;width:100px;">本周四：${
                  this.thisWeeksData[0]
                },</span>上周四：${params.data[0]} <br>
                <span style="display:inline-block;width:100px;">本周五：${
                  this.thisWeeksData[11]
                },</span>上周五：${params.data[11]}
                <br> <span style="display:inline-block;width:100px;"></span>上周六：${params.data[10]}<br>
                <span style="display:inline-block;width:100px;"></span>上周日：${params.data[9]}</div>`;
                }
                if (myddy == 4) {
                  this.thisWeeksData[11] = "";
                  this.thisWeeksData[10] = "";
                  this.thisWeeksData[9] = "";
                  return `<div style="padding:20px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
                <span style="display:inline-block;width:100px;">本周二：${
                  this.thisWeeksData[2]
                },</span>上周二：${params.data[2]} <br>
                <span style="display:inline-block;width:100px;">本周三：${
                  this.thisWeeksData[1]
                },</span>上周三：${params.data[1]}<br>
                <span style="display:inline-block;width:100px;">本周四：${
                  this.thisWeeksData[0]
                },</span>上周四：${params.data[0]} <br>
                <span style="display:inline-block;width:100px;"></span>上周五：${params.data[11]}
                <br> <span style="display:inline-block;width:100px;"></span>上周六：${params.data[10]}<br>
              <span style="display:inline-block;width:100px;"></span>上周日：${params.data[9]}</div>`;
                }
                if (myddy == 3) {
        
                  this.thisWeeksData[0] = "";
                  this.thisWeeksData[11] = "";
                  this.thisWeeksData[10] = "";
                  this.thisWeeksData[9] = "";
                  return `<div style="padding:20px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
                <span style="display:inline-block;width:100px;">本周二：${
                  this.thisWeeksData[2]
                },</span>上周二：${params.data[2]} <br>
                <span style="display:inline-block;width:100px;">本周三：${
                  this.thisWeeksData[1]
                },</span>上周三：${params.data[1]}<br>
               <span style="display:inline-block;width:100px;"></span>上周四：${params.data[0]} <br>
                <span style="display:inline-block;width:100px;"></span>上周五：${params.data[11]}
                <br> <span style="display:inline-block;width:100px;"></span>上周六：${params.data[10]}<br>
               <span style="display:inline-block;width:100px;"></span>上周日：${params.data[9]}</div>`;
                }
                if (myddy == 2) {
                  this.thisWeeksData[1] = "";
                  this.thisWeeksData[0] = "";
                  this.thisWeeksData[11] = "";
                  this.thisWeeksData[10] = "";
                  this.thisWeeksData[9] = "";
                  return `<div style="padding:20px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
                <span style="display:inline-block;width:100px;">本周二：${
                  this.thisWeeksData[2]
                },</span>上周二：${params.data[2]} <br>
                <span style="display:inline-block;width:100px;"></span>上周三：${params.data[1]}<br>
               <span style="display:inline-block;width:100px;"></span>上周四：${params.data[0]} <br>
              <span style="display:inline-block;width:100px;"></span>上周五：${params.data[11]}
                <br><span style="display:inline-block;width:100px;"></span>上周六：${params.data[10]}<br>
               <span style="display:inline-block;width:100px;"></span>上周日：${params.data[9]}</div>`;
                }
                if (myddy == 1) {
                  this.thisWeeksData[2] = "";
                  this.thisWeeksData[1] = "";
                  this.thisWeeksData[0] = "";
                  this.thisWeeksData[11] = "";
                  this.thisWeeksData[10] = "";
                  this.thisWeeksData[9] = "";
                  return `<div style="padding:20px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
               <span style="display:inline-block;width:100px;"></span>上周二：${params.data[2]} <br>
               <span style="display:inline-block;width:100px;"></span>上周三：${params.data[1]}<br>
               <span style="display:inline-block;width:100px;"></span>上周四：${params.data[0]} <br>
              <span style="display:inline-block;width:100px;"></span>上周五：${params.data[11]}<br>
              <span style="display:inline-block;width:100px;"></span>上周六：${params.data[10]}<br>
              <span style="display:inline-block;width:100px;"></span>上周日：${params.data[9]}</div>`;
                }
                return `<div style="padding:20px;">
                <span style="display:inline-block;width:100px;">本周一：${
                  this.thisWeeksData[3]
                },</span>上周一：${params.data[3]}<br> 
                <span style="display:inline-block;width:100px;">本周二：${
                  this.thisWeeksData[2]
                },</span>上周二：${params.data[2]} <br>
                <span style="display:inline-block;width:100px;">本周三：${
                  this.thisWeeksData[1]
                },</span>上周三：${params.data[1]}<br>
                <span style="display:inline-block;width:100px;">本周四：${
                  this.thisWeeksData[0]
                },</span>上周四：${params.data[0]} <br>
                <span style="display:inline-block;width:100px;">本周五：${
                  this.thisWeeksData[11]
                },</span>上周五：${params.data[11]}
                <br> <span style="display:inline-block;width:100px;">本周六：${
                  this.thisWeeksData[10]
                },</span>上周六：${params.data[10]}<br>
                <span style="display:inline-block;width:100px;"> 本周日：${
                  this.thisWeeksData[9]
                },</span>上周日：${params.data[9]}</div>`;
              }
            },
            data: [this.lastWeeksData]
          },
          // {
          //   name: "最高值",
          //   type: "radar",
          //   symbol: "circle",
          //   symbolSize: 5,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(226,87,108,1)",
          //       borderColor: "rgba(226,87,108, 0.3)",
          //       borderWidth: 5
          //     }
          //   },
          //   tooltip: {
          //     formatter: params => {
          //       let data = params.data;
          //       let filtersData = data.filter((item, index, arr) => {
          //         if (item != null) {
          //           return true;
          //         }
          //         return false;
          //       });
          //       return `最高点:${filtersData[0]}`;
          //     }
          //   },
          //   data: [this.maxData]
          // }
        ]
      };
      myChart.setOption(option);
    },
    //词云
    getWorld() {
      let myChart = echarts.init(document.getElementById("hotWorld_police"));
      let colorArr = [
        "#fb6873",
        "#fb547b",
        "#e750b7",
        "#7b50e7",
        "#507be7",
        "#50d7e7",
        "#5ee750",
        "#e7d350",
        "#e79750",
        "#e75050",
        "#ffa2a9",
        "#ffa2f5",
        "#b6a2ff",
        "#a2d2ff",
        "#a2ffba",
        "#feffa2",
        "#ffd2a2",
        "#f29b9b",
        "#ffc5a2",
        "#fac1fb",
        "#ba333d",
        "#ba3373",
        "#7933ba",
        "#338fba",
        "#33ba73",
        "#95ba33",
        "#ba9f33",
        "#ba7c33",
        "#ba5033",
        "#c8a9ac"
      ];
      let option = {
        tooltip: {
          show: true,
          formatter: function(params) {
            let html = `<p><span style="display:inline-block;width:5px;
                height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}:共出现${params.value}次</p>`;
            return html;
          }
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 35,
            sizeRange: [12, 30],
            rotationRange: [0, 0],
            shape: "pentagon",
            textStyle: {
              normal: {
                color: function() {
                  return colorArr[Math.floor(Math.random() * colorArr.length)];
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            data: this.hotWordList
            // [
            //   {
            //     name: "故障",
            //     value: 1
            //   },
            //   {
            //     name: "屏蔽",
            //     value: 2
            //   },
            //   {
            //     name: "烟感",
            //     value: 3
            //   },
            //   {
            //     name: "排烟风机",
            //     value: 4
            //   },
            //   {
            //     name: "漏电",
            //     value: 5
            //   },
            //   {
            //     name: "报警",
            //     value: 6
            //   },
            //   {
            //     name: "联动",
            //     value: 7
            //   },
            //   {
            //     name: "误报",
            //     value: 8
            //   },
            //   {
            //     name: "手动",
            //     value: "9"
            //   }
            // ]
          }
        ]
      };
      myChart.setOption(option);
         window.onresize = myChart.resize;
    }
  }
};
</script>
<style lang="scss" scoped>
@mixin flex_around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.police-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  .radar-box {
    position: relative;
    height: 30%;
    h3 {
      position: absolute;
      top: 10px;
      span {
        color: #4699ff;
      }
    }
    .radar-lengend {
      ul {
        @include flex_around;
        margin-top: 20px;
        li {
          list-style: none;
          color: #ffffff;
          &:nth-child(1) {
            div {
              display: inline-block;
              width: 10px;
              border: 1px solid #5eb8f7;
              vertical-align: middle;
              margin-right: 10px;
            }
          }
          &:nth-child(2) {
            div {
              display: inline-block;
              width: 10px;
              border: 1px solid #2968e6;
              vertical-align: middle;
              margin-right: 10px;
            }
          }
          &:nth-child(3) {
            div {
              display: inline-block;
              width: 6px;
              height: 6px;
              vertical-align: middle;
              margin-right: 10px;
              background: #e2576c;
              border-radius: 50%;
              box-shadow: rgba(226, 87, 108, 0.5) 0px 0px 4px;
            }
          }
        }
      }
    }
  }
  .police-hot {
    height: 100%;
    margin-top: 20px;
    h3 {
      span {
        color: #4699ff;
      }
    }
  }
  .pie-box {
    height: 30%;
    h3 {
      position: absolute;
      top: 10px;
      span {
        color: #4699ff;
      }
    }
  }
  .world-box {
    height: 33%;
  }
}
</style>